import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { increment, decrementAsync, push, splice } from "./store/reducers/counter";

export default function App() {
  const dispatch = useDispatch();
  const { count, list } = useSelector((state) => state.counter);
  return (
    <div>
      <div>{count}</div>
      {list.map((item, index) => (
        <span key={index} onClick={() => dispatch(splice(index))}>
          {item}
        </span>
      ))}
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrementAsync())}>async -</button>
      <button onClick={() => dispatch(push())}>push</button>
    </div>
  );
}
